<template>
  <div>
    <!-- 登录/注册 -->
    <a-icon type="shopping-cart" class="shopping-cart car" />
    <span class="carspan">&nbsp;|&nbsp;</span>
    <span v-if="$store.state.isLogin" @click="showModal">登录/注册&nbsp;</span>
    <span v-else>
      <a-dropdown>
      <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="color:black">
      {{userInfo.nickname}} <a-icon type="down" />
    </a>
    <!-- <img style="width:30px; height:30px" :src="mineImg" alt=""> -->
    <a-menu slot="overlay">
      <a-menu-item>
        <router-link to="/mine" tag="span"><a href="javascript:;">个人中心</a></router-link>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;" @click="logout">退出登录</a>
        <!-- <a href="javascript:;">退出登录</a> -->
      </a-menu-item>
    </a-menu>
    </a-dropdown>
    <img style="width:30px; height:30px" :src="userInfo.avatarUrl" alt="">
    </span>
    

    <!-- 登录弹框 -->
    <div>
      <a-modal :footer="null" v-model="login" @ok="handleOk">
        <!-- tab切换 -->
        <div>
          <a-tabs
            default-active-key="1"
            @change="callback"
            size="small"
            tabBarGutter="190px"
          >
          <!-- 普通登录 -->
            <a-tab-pane key="1" tab="普通登录">
              <a-form layout="horizontal" :form="form" @submit="handleSubmit">
                <a-form-item
                  :validate-status="userNameError() ? 'error' : ''"
                  :help="userNameError() || ''"
                >
                  <a-input
                    v-decorator="[
                      'userName',
                      {
                        rules: [
                          {
                            required: true,
                            message: 'Please input your username!',
                          },
                        ],
                      },
                    ]"
                    placeholder="Username"
                  >
                    <a-icon
                      slot="prefix"
                      type="user"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                </a-form-item>
                <a-form-item
                  :validate-status="passwordError() ? 'error' : ''"
                  :help="passwordError() || ''"
                >
                  <a-input
                    v-decorator="[
                      'password',
                      {
                        rules: [
                          {
                            required: true,
                            message: 'Please input your Password!',
                          },
                        ],
                      },
                    ]"
                    type="password"
                    placeholder="Password"
                  >
                    <a-icon
                      slot="prefix"
                      type="lock"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                </a-form-item>
                <a-form-item>
                 <a-button
                    type="primary"
                    style="width:100%; margin-bottom:10px;margin-top:10px"
                    html-type="submit"
                    :disabled="hasErrors(form.getFieldsError())"
                  >
                    登录
                  </a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>

            <!-- 手机登录 -->
            <a-tab-pane key="2" tab="手机登录" force-render>
              <a-form layout="horizontal" :form="form" @submit="handleSubmit">
                <a-form-item
                  :validate-status="userNameError() ? 'error' : ''"
                  :help="userNameError() || ''"
                >
                  <a-input
                  ref="phone"
                    placeholder="请输入手机号"
                  >
                    <a-icon
                      slot="prefix"
                      type="user"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                </a-form-item>
                <a-form-item
                  :validate-status="passwordError() ? 'error' : ''"
                  :help="passwordError() || ''"
                >
                  <a-input
                  ref="code"
                  class="getcode"
                    type="password"
                    placeholder="请输入验证码"
                  >
                    <a-icon
                      slot="prefix"
                      type="lock"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                  <a-button type="primary" @click="getVerficationCode">
                      获取验证码
                  </a-button>
                </a-form-item>
                <a-form-item>
                  <a-button
                  @click="phoneLogin"
                  type="primary"
                    style="width:100%; margin-bottom:10px;margin-top:10px"
                    html-type="submit"
                    :disabled="hasErrors(form.getFieldsError())"
                  >
                    登录
                  </a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
          
        </div>
        
        <span @click="showModal1">立即注册！</span>
        <div class="forgetpassword"></div>
        <span @click="showModal2">忘记密码？</span>
      </a-modal>
    </div>

    <!-- 注册页面 -->
    <a-modal
      :footer="null"
      v-model="register"
      @ok="handleOk"
      text-aline="center"
    >
      <h1 style="color:#1da57a">普通注册</h1>
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="账号">
          <a-input
            v-decorator="[
              'email',
              {
                rules: [
                  {
                    type: 'email',
                    message: 'The input is not valid E-mail!',
                  },
                  {
                    required: true,
                    message: 'Please input your E-mail!',
                  },
                ],
              },
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ],
              },
            ]"
            type="password"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
          <a-input
            v-decorator="[
              'confirm',
              {
                rules: [
                  {
                    required: true,
                    message: 'Please confirm your password!',
                  },
                  {
                    validator: compareToFirstPassword,
                  },
                ],
              },
            ]"
            type="password"
            @blur="handleConfirmBlur"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout">
          <span slot="label"> 昵称 </span>
          <a-input
            v-decorator="[
              'nickname',
              {
                rules: [
                  {
                    required: true,
                    message: 'Please input your nickname!',
                    whitespace: true,
                  },
                ],
              },
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="手机号">
          <a-input
            v-decorator="[
              'phone',
              {
                rules: [
                  {
                    required: true,
                    message: 'Please input your phone number!',
                  },
                ],
              },
            ]"
            style="width: 100%"
          >
            <a-select
              slot="addonBefore"
              v-decorator="['prefix', { initialValue: '86' }]"
              style="width: 70px"
            >
              <a-select-option value="86"> +86 </a-select-option>
              <a-select-option value="87"> +87 </a-select-option>
            </a-select>
          </a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="验证码">
          <a-row :gutter="8">
            <a-col :span="12">
              <a-input
                v-decorator="[
                  'captcha',
                  {
                    rules: [
                      {
                        required: true,
                        message: 'Please input the captcha you got!',
                      },
                    ],
                  },
                ]"
              />
            </a-col>
            <a-col :span="12">
              <a-button>获取验证码</a-button>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item v-bind="tailFormItemLayout">
          <a-button type="primary" html-type="submit"> 注册 </a-button>
          <span>&nbsp;&nbsp;&nbsp;去登录</span>
        </a-form-item>
        <!-- <span>去登录</span> -->
      </a-form>
    </a-modal>

    <!-- 忘记密码 -->
    <a-modal :footer="null" v-model="$store.state.forgetIsLogin" @ok="handleOk">
      <h1 style="color:#1da57a">忘记密码</h1>
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item>
          <a-input ref="loginnum" id="warning" placeholder="请输入账号" />
        </a-form-item>
        <a-form-item has-feedback validate-status="">
          <a-input-password ref='newpassword' placeholder="请输入新密码" />
        </a-form-item>

        <a-form-item has-feedback>
          <a-input-password ref='resetpassword' allow-clear placeholder="请再次输入新密码" />
        </a-form-item>
        <a-form-item>
          <a-input ref='fogetmobil' id="warning" placeholder="请输入手机号" />
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="验证码">
          <a-row :gutter="8">
            <a-col :span="12">
              <a-input
              ref='forgetcode'
                v-decorator="[
                  'captcha',
                  {
                    rules: [
                      {
                        required: true,
                        message: 'Please input the captcha you got!',
                      },
                    ],
                  },
                ]"
              />
            </a-col>
            <a-col :span="12">
              <a-button @click="getforgetCode">获取验证码</a-button>
            </a-col>
          </a-row>
        </a-form-item>
        
        <a-form-item v-bind="tailFormItemLayout">
          <a-button type="primary" html-type="submit" @click='sureChange'> 确定更改密码 </a-button>
          
        </a-form-item>
        <!-- <span>去登录</span> -->
        <span>立即注册</span>
        <div class="forgetpassword"></div>
        <span>去登录</span>
      </a-form>
      
    </a-modal>
  </div>
</template>
<script>
import { login,getCode,mobilLogin,forGetCode ,forgetPsd,getUserMsg,logout} from "../api/api";
// 注册框
const residences = [
  {
    value: "zhejiang",
    label: "Zhejiang",
    children: [
      {
        value: "hangzhou",
        label: "Hangzhou",
        children: [
          {
            value: "xihu",
            label: "West Lake",
          },
        ],
      },
    ],
  },
  {
    value: "jiangsu",
    label: "Jiangsu",
    children: [
      {
        value: "nanjing",
        label: "Nanjing",
        children: [
          {
            value: "zhonghuamen",
            label: "Zhong Hua Men",
          },
        ],
      },
    ],
  },
];
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some((field) => fieldsError[field]);
}

export default {
  name: "loginPage",
  data() {
    return {
      // 登录
      login: false,
      hasErrors,
      form: this.$form.createForm(this, { name: "horizontal_login" }),
      // 注册
      ModalText: "Content of the modal",
      register: false,
      confirmLoading: false,
      forgetPassword: false,

      userInfo:"",

      // 注册框
      confirmDirty: false,
      //  注册表单
      residences,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  created(){
   console.log(this.$store.state.isLogin)
            // 每次更新都会检测是否能检测到用户个人信息
            getUserMsg().then(res=>{
              console.log(res);
                this.userInfo = res.userInfo
            })
  },

  mounted() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    // 退出登录
    logout(){
                logout().then(res=>{
                    console.log(res)
                    if (res.code == 0){
                        this.$store.commit("changeLogin",{isLogin:true})
                    }
                })
            },
    //    修改VUEX内的值
        // changeLogin(state, payload) {

        // },
    // tab切换
    callback(key) {
      console.log(key);
    },
    // 忘记密码时发送手机验证码
    getforgetCode(){
      console.log(this.$refs.loginnum.stateValue);
      forGetCode(this.$refs.loginnum.stateValue,this.$refs.fogetmobil.stateValue).then(res=>{
        console.log(res);
      })
    },
  //  setNewPsw(){
  //     console.log(this.$refs.loginName.stateValue)
  //     console.log(this.$refs.phoneNum.stateValue)
  //     // console.log(this.$refs.newPsw.stateValue)
  //     console.log(this.$refs.newPsw2.$refs.input.stateValue)
  //     console.log(this.$refs.code.stateValue)
  //     forgetPsw(this.$refs.loginName.stateValue,this.$refs.newPsw2.$refs.input.stateValue,this.$refs.phoneNum.stateValue,this.$refs.code.stateValue).then(res=>{
  //       console.log(res)
  //       if(res.code==0){
  //         this.visiblePwd=false

  //       }
  //     })
  //   },
    // 忘记密码登录
    sureChange(){
      forgetPsd(this.$refs.loginnum.stateValue,this.$refs.resetpassword.$refs.input.stateValue,this.$refs.fogetmobil.stateValue,this.$refs.forgetcode.stateValue).then(res=>{
        console.log(res)
        if(res.code==0){
          this.$store.commit("changeforgetIsLogin",{forgetIsLogin:false})
          this.$store.commit("changeLogin",{isLogin:true})
          // this.forgetPassword=false;

        }
      })
    },
    // 注册
    showModal1() {
      this.register = true;
      this.login = false;
    },
    // 忘记密码
    showModal2() {
      this.$store.commit("changeforgetIsLogin",{forgetIsLogin:true})
      this.login = false;
    },
    // 获取手机验证码
    getVerficationCode(){
        console.log(this.$refs.phone.stateValue)
        console.log(this.$refs.code.stateValue)
        getCode(this.$refs.phone.stateValue).then(res=>{
          console.log(res);
        })
    },
    // 手机验证码登录
    phoneLogin(){
       console.log(this.$refs.phone.stateValue)
       console.log(this.$refs.code.stateValue)
       mobilLogin(this.$refs.phone.stateValue,this.$refs.code.stateValue).then(res=>{
        console.log(res)
        if (res.code == 0) {
          // 关闭登录弹框
          this.login=false;
              // 显示个人信息
              this.isLogin=true
              this.userInfo = res.userInfo
              this.$store.commit("changeLogin",{isLogin:false})
        }
      })
    },
    
    // 登录
    showModal() {
      this.login = true;
    },
    handleOk(e) {
      console.log(e);
      this.login = false;
    },

    // Only show error after a field is touched.
    userNameError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched("userName") && getFieldError("userName");
    },
    // Only show error after a field is touched.
    passwordError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched("password") && getFieldError("password");
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          //    请求接口
          login(values.userName, values.password).then((res) => {
            console.log(res);
            if (res.code == 0) {
              //    登录成功，关闭弹框
              this.login=false;
              // 显示个人信息
              this.isLogin=true
              this.userInfo = res.userInfo
              this.$store.commit("changeLogin",{isLogin:false})
              // this.$router.push({ path: "/mine" });
              // this.$router.push({path:"/mine"})
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
// /deep/.ant-input {
//     width: 40px;
// }
// /deep/.ant-modal {
//     padding: 100px 20px 50px;
// }
/deep/.ant-tabs-content .ant-tabs-content-animated .ant-tabs-top-content {
    height: 100px;
}
/deep/.ant-btn .ant-btn-primary {
    width: 200px;
    padding: 200px;
}
/deep/.ant-modal-content {
    text-align: center;
    color: #1da57a;
}
.getcode {
    width: 250px;
    margin-right: 20px;
}
/deep/.shopping-cart {
  font-size: 20px;
  color: #999;
}
/deep/.carspan {
  font-size: 20px;
  color: #999;
}
/deep/.ant-modal-content {
  padding: 10px 50px;
}
.forgetpassword {
  display: inline-block;
  width: 210px;
}
</style>